<template>
    <div class="page checkPointDetailNew-page" data-page="checkPointDetailNew" style="z-index: 2;">
        <div class="link-page-nav">
            <a href="#" class="link" @click=$root.backToTab()>
                <i class="iconfont icon-zuo"></i>
            </a>
        </div>
        <div class="link-page-top">
            <div class="link-page-title" id="check_pointName_{{getNewId}}"></div>
        </div>
        <div class="page-content pointBaiduMap-page-content">
            <div class="pointImg-top">
                <img style="width: 100%;height: 160px;" id="show_pointImg_{{getNewId}}">
            </div>
            <div class="pointImg-title">检查项</div>
            <div style="margin-top: 0" class="list media-list">
                  <ul style="padding:0 20px;" id="point_detail_{{getNewId}}" class="newPoint-detail"></ul>
            </div>
        </div>
    </div>
</template>
<script>
    return {
        on: {
            pageInit: function (e, page) {
                
            },
            pageBeforeIn: function(e, page) {
                var self = this;
                var $ = self.$$;
                if(self.$route.params.visualCode){
                    //扫码获取任务详情
                    var newCode="";
                    //判断是否有特殊字符-针对铁路的巡检
                     if(self.$route.params.isHave==0){
                        newCode="#"+self.$route.params.visualCode;
                     }else{
                        newCode=self.$route.params.visualCode;
                     }
                    Dao.getTaskPointInfoByVisualCodeNew({
                        userName:userInfor.accountName,
                        deviceId:appKeyObj.deviceId,
                        account:userInfor.accountName,
                        visualCode:newCode,
                        taskId:self.$route.params.taskId
                    },function(data) {
                        if(data.status==202){
                            common.loading(1);
                            setTimeout(function(){
                                app.router.back();
                                common.loading(0);
                            },400);
                            app.methods.showToastCenter('非本人领取任务');
                        }else{
                            $("#check_pointName_"+self.getNewId).empty();
                            $("#point_detail_"+self.getNewId).empty();
                            self.$route.params.visualCode = "";
                            self.pointId = data.pointId;
                            self.pointResultId = data.pointResultId;
                            self.taskId = data.taskId;
                            $("#check_pointName_"+self.getNewId).append(common.transNullundefinedToline(data.pointName));
                            var address = data.address;  // 具体位置
                            var fbsName = data.fbsName;  //所在楼栋
                            var fbsId = data.fbsId;
                            $("#show_pointImg_"+self.getNewId).attr('src',picCheckPoint(data.picUrl));
                            var pointList = data.contentList;
                            var pointListId = [];
                            self.pointResultLength=pointList.length;
                            if (pointList.length > 0){
                                for (var i = 0; i < pointList.length;i++) {
                                    pointListId.push(pointList[i].id);
                                    var optionHtml='';
                                    //获取巡检内容的巡检项
                                    Dao.getOptionListByPointId({
                                        userName:userInfor.accountName,
                                        deviceId:appKeyObj.deviceId,
                                        contentId:pointList[i].pointContentId,
                                        optionVersion:pointList[i].optionVersion==null?"":pointList[i].optionVersion
                                    },function(data){
                                        for (var j = 0; j < data.length;j++) {
                                            optionHtml+=`<div class="item-title-row point-check-list">
                                            <label class="item-radio item-content label-width">
                                                <input type="radio" style="width:100%" data-type="`+common.transNullundefinedToline(pointList[i].content)+`" name="checkPoint-checkbox`+pointList[i].id+`" value="`+data[j].id+`" data-value="`+data[j].isOk+`" data-version="`+common.transNullundefinedToline(data[j].optionVersion)+`" data-option="`+common.transNullundefinedToline(data[j].option)+`"/>
                                                <i style="border-radius: 18px;" class="icon icon-radio"></i>
                                                <div class="">
                                                    <div class="item-title option-position">`+data[j].option+`</div>
                                                </div>
                                            </label>
                                            </div>`;
                                        }
                                    },false);
                                    $("#point_detail_"+self.getNewId).append(`<li>
                                        <div class="item-inner">
                                            <div class="item-title-row">
                                            <div class="my-item-title">`+(i+1)+"."+common.transNullundefinedToline(pointList[i].content)+`</div>
                                            </div>
                                            `+optionHtml+`
                                        </div>
                                    </li>`);
                                }
                                $("#point_detail_"+self.getNewId).append(`<li><a href="#" id="submitPoint_`+self.getNewId+`" class="item-link list-button login-quit-btn" >提交</a></li>`);
                                $("#point_detail_"+self.getNewId).append(`<li style="width: 80%;margin: auto;">
                                    <label style="padding-left: 0px;min-height: 0px;" class="item-checkbox item-content">
                                        <input checked type="checkbox" id="isToTrouble_`+self.getNewId+`" name="checkPoint" value="11111"/>
                                        <i style="margin-right: 8px;" class="icon icon-checkbox"></i>
                                        <div class="point-details ">结果为不合格时，同时创建隐患整改</div>
                                    </label>
                                </li>`);
                            }
                            //选择后的样式变化
                            jQuery("#point_detail_"+self.getNewId+" .item-radio").click(function(e) {
                                var self = this;
                                var characteristic=null;
                                $(this).parent().parent().find(".icon").removeClass("checkColor-bor-gray-2 checkColor-bor-red-2 checkColor-bor-green-2");
                                $(this).parent().parent().find(".item-title-row").removeClass("checkColor-bor-gray checkColor-bor-red checkColor-bor-green");
                                $(this).parent().parent().find(".item-radio div").removeClass("checkColor-gray checkColor-red checkColor-green");
                                //这个地方点击过快时无法获取data-value的值
                                if($(this).children()[1].getAttribute("data-value")==1 || this.characteristic==1 && $(this).children()[1].getAttribute("data-value")!=null){
                                    $(this).children().find(".item-title").addClass("checkColor-green");
                                    $(this).parent().addClass("checkColor-bor-green");
                                    $(this).find(".icon").addClass("checkColor-bor-green-2");
                                    this.characteristic=$(this).children()[1].getAttribute("data-value");
                                }else if($(this).children()[1].getAttribute("data-value")==0 || this.characteristic==0 && $(this).children()[1].getAttribute("data-value")!=null){
                                    $(this).children().find(".item-title").addClass("checkColor-red");
                                    $(this).parent().addClass("checkColor-bor-red");
                                    $(this).find(".icon").addClass("checkColor-bor-red-2");
                                    this.characteristic=$(this).children()[1].getAttribute("data-value");
                                }
                                //当为空的时候通过标识来判断
                                if($(this).children()[1].getAttribute("data-value")==null){
                                    if(this.characteristic==0){
                                        $(this).children().find(".item-title").addClass("checkColor-red");
                                        $(this).parent().addClass("checkColor-bor-red");
                                        $(this).find(".icon").addClass("checkColor-bor-red-2");
                                    }else if(this.characteristic==1){
                                        $(this).children().find(".item-title").addClass("checkColor-green");
                                        $(this).parent().addClass("checkColor-bor-green");
                                        $(this).find(".icon").addClass("checkColor-bor-green-2");
                                    }
                                }
                            });
                            jQuery("#submitPoint_"+self.getNewId).off("click").on("click",{'data':pointListId,'pointResultId':self.pointResultId,'taskId':self.taskId},function(e) {
                            var pointId = e.data.data;
                            var pointResultId = e.data.pointResultId;
                            var taskId = e.data.taskId;
                            var resultDetail = [];
                            var check_val = [];
                            var unqualifi_var = [];
                            var details="";
                            //判断是否所有的内容都勾选
                            for (var i = 0; i < pointId.length; i++) {
                                var obj = document.getElementsByName("checkPoint-checkbox"+pointId[i]);
                                var result = {};
                                result.id = pointId[i];
                                for(var j=0;j<obj.length;j++){
                                    if(obj[j].checked){

                                        result.result =obj[j].getAttribute("data-value");
                                        result.pointOptionId=obj[j].value;
                                        result.optionVersion=obj[j].getAttribute("data-version");
                                        if(obj[j].getAttribute("data-value")==0){
                                            unqualifi_var.push(obj[j].value);
                                            pointName = obj[j].getAttribute("data-type");
                                            details+=pointName+obj[j].getAttribute("data-option");
                                        }else{
                                            check_val.push(obj[j].value);
                                        }
                                        resultDetail.push(result);
                                    }
                                }
                            }
                            if(resultDetail.length<self.pointResultLength){
                                app.methods.showToastBottom('你还有没选择的点位结果');
                                return;
                            }
                            if (check_val.length == 0 &&  unqualifi_var.length == 0) {
                                app.methods.showToastBottom('请选择点位结果');
                                return;
                            } else {
                                var result = 0;
                                if (unqualifi_var.length == 0){
                                    //全部合格
                                    result = 2;
                                } else if (unqualifi_var.length < pointId.length) {
                                    //部分不合格
                                    result = 3;
                                } else if (unqualifi_var.length == pointId.length) {
                                    //全部不合格
                                    result = 4;
                                }
                                common.loading(1);
                                Dao.submitResultNew({
                                    userName:userInfor.accountName,
                                    deviceId:appKeyObj.deviceId,
                                    account:userInfor.accountName,
                                    pointId:self.pointId,
                                    taskId:taskId,
                                    resultDetail:JSON.stringify(resultDetail),
                                },function(data) {
                                    if(data){
                                        if(data.status==203){
                                            app.methods.showToastBottom("点位重复巡检，不可提交");
                                        }
                                        app.methods.backToTab();
                                        // app.view.current.el.f7View.router.currentPageEl.f7Component.updateView(1);
                                    }else{
                                        common.loading(0);
                                        app.methods.showToastBottom("提交巡检结果成功");
                                        //创建隐患
                                        details += ","+fbsName+","+fbsId+","+address;
                                        if (result != 2 && jQuery("#isToTrouble_"+self.getNewId).prop("checked")){
                                            app.router.navigate("/createTrouble/"+details+"/-1/-1/");
                                        } else {
                                            app.methods.backToTab();
                                            // app.view.current.el.f7View.router.currentPageEl.f7Component.updateView(1);
                                        }
                                    }

                                });
                            }
                        });
                        }
                    });
                }else{
                    app.methods.backToTab();
                    // common.loading(1);
                    // setTimeout(function(){
                    //     app.methods.backToTab();
                    //     // app.router.back();
                    //     // common.loading(0);
                    //     app.view.current.el.f7View.router.currentPageEl.f7Component.updateView(1);
                    // },400);
                }
                if(native.getDataByKey("IS_OFFLINE_MODULE") == 1){
                    jQuery(".item-checkbox").hide()
                    jQuery("#isToTrouble_"+self.getNewId).prop("checked",false)
                }
            }
        },
        data: function () {
            return {
                pointId:'',
                pointResultId:'',
                taskId: '',
                pointResultLength:0,
                getNewId: (new Date()).getTime()
            }
        },


    }
</script>

<style scoped>
    .navbar .right {
        margin-left: 0;
        margin-right: 0px;
    }
    .my-item-title{
        min-width: 0;
        -webkit-flex-shrink: 1;
        -ms-flex-negative: 1;
        flex-shrink: 1;
        position: relative;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    .list .item-inner:after{
        height: 0px!important;
    }
    .point-details{
        font-family: HiraginoSansGB-W3;
        font-size: 12px;
        line-height: 1.58;
        color: #666666;
        padding: 20px 0;
        width: 100%;
    }
    .checkColor-gray{
        color: #000;
    }
    .checkColor-bor-gray{
        border:1px solid #000;
    }
    .checkColor-bor-gray-2{
        border-color: #000 !important;
    }
    .checkColor-bor-gray-2::after{
        background-color: #000 !important;
    }
    .checkColor-red{
        color: #E07762;
    }
    .checkColor-bor-red{
        border:1px solid #E07762;
    }
    .checkColor-bor-red-2{
        border-color: #E07762 !important;
    }
    .checkColor-bor-red-2::after{
        background-color: #E07762 !important;
    }
    .checkColor-green{
        color: #69BA71;
    }
    .checkColor-bor-green{
        border:1px solid #69BA71;
    }
    .checkColor-bor-green-2{
        border-color: #69BA71 !important;
    }
    .checkColor-bor-green-2::after{
        background-color: #69BA71 !important;
    }
    .label-width{
        width: 100%;
    }
    .option-position{
        position:absolute;
        top:8px;
        left:39px
    }

    .newPoint-detail label.item-radio > .icon-radio {
  margin-right: 10px;
   }
</style>
